// import { Form, Input, Select } from 'element-react';
import { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Tooltip,
  Table,
  Tag,
  Space,
  Badge,
  Modal,
  Radio,
} from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  DeleteOutlined,
  SyncOutlined,
  AppstoreOutlined,
  EditOutlined,
} from '@ant-design/icons';
import { useDispatch, useSelector } from 'umi';
import './index.less';
import { sysLogModelState } from '@/models/sysLog';
const { Option } = Select;
export default function SysLog() {
  const {
    sysLogList,
    sysLogListLength,
  } = useSelector(
    (state: { sysLog: sysLogModelState }) => state.sysLog,
  );
  const dispatch = useDispatch();
  const [name, setName] = useState('');
  const [state, setState] = useState(undefined);
  const [flag, setFlag] = useState(true);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [form] = Form.useForm();
  const [getFrom] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isNewAdd, setIsNewAdd] = useState(false);
  const [isNewAddModal, setIsNewAddModal] = useState(false);
  const [id, setId] = useState(0);
  const [isAdd, setIsAdd] = useState(false);
  const [radioStatus, setRadioStatus] = useState(1);
  const [radioListStyle, setRadioListStyle] = useState(0);
  const [fromName, setFromName] = useState('');
  const [fromSort, setFromSort] = useState('');
  useEffect(() => {
    dispatch({
      type: 'sysLog/getsysLogList',
      payload: {
        page,
        pageSize,
      },
    });
  }, [page, pageSize]);
  const onInput = (e: any) => {
    setName(e.target.value);
  };
  const handleChange = (value: any) => {
    setState(value);
  };
  const onEmpty = () => {
    form.setFieldsValue({ name: '', state: undefined });
    setName('');
    setState(undefined);
  };
  //搜索
  const onSearch = () => {
    if (name || state) {
      dispatch({
        type: 'prodProdTag/getSearchProdProdTag',
        payload: {
          page,
          pageSize,
          title: name,
          status: state,
        },
      });
    }
  };
  //显隐
  const onDisplay = () => {};
  //搜索按钮显示from
  const onFlag = () => {
    setFlag(!flag);
  };
  //刷新
  const onRefresh = () => {
    window.location.reload();
  };
  const handleOk = () => {
    dispatch({
      type: 'prodProdTag/getDelProdProdTag',
      payload: {
        id,
      },
    });
    window.location.reload();
    setIsModalVisible(false);
  };
  function publicStatus() {
    getFrom.setFieldsValue({
      fromListStyle: 0,
      fromName: '',
      fromStatus: 1,
      fromSort: '',
    });
    setRadioStatus(1);
    setRadioListStyle(0);
    setFromName('');
    setFromSort('');
  }
  const handleCancel = () => {
    setIsModalVisible(false);
    setIsNewAddModal(false);
    publicStatus();
  };
  const columns: any[] = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      align: 'center',
      width: 150,
    },
    {
      title: '用户操作',
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      width: 150,
    },
    {
      title: '请求方法',
      dataIndex: 'method',
      key: 'method',
      align: 'center',
      width: 150,
    },
    {
      title: '请求参数',
      dataIndex: 'params',
      key: 'params',
      align: 'center',
      width: 150,
    },
    {
      title: '执行时长(毫秒)',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
      width: 150,
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip',
      align: 'center',
      width: 150,
    },
    {
      title: '创建时间',
      key: 'createDate',
      dataIndex: 'createDate',
      align: 'center',
      width: 150,
    },
  ];
  return (
    <div className="sys-log">
      <div
        className="sys-log-from"
        style={flag ? { display: 'block' } : { display: 'none' }}
      >
        <Form layout="inline" form={form}>
          <Form.Item name="name" label="标签名称">
            <Input
              placeholder="标签名称"
              value={name}
              onChange={(e) => onInput(e)}
            />
          </Form.Item>
          <Form.Item name="state" label="状态">
            <Select
              placeholder="状态"
              style={{ width: 191 }}
              allowClear
              onChange={handleChange}
            >
              <Option value="0">禁用</Option>
              <Option value="1">正常</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} onClick={onSearch}>
              搜索
            </Button>
            <Button icon={<DeleteOutlined />} onClick={onEmpty}>
              清空
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="avue-crud">
        <div className="avue-crud-left">
          
        </div>
        <div className="avue-crud-right">
          <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onRefresh}
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onDisplay}
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onFlag}
            />
          </Tooltip>
        </div>
      </div>
      <Table
        bordered={true}
        columns={columns}
        dataSource={sysLogList}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
          pageSize: pageSize,
          onChange: function (page, pageSize) {
            setPageSize(pageSize);
            setPage(page);
          },
          showTotal: (total) => `共 ${total} 条`,
          total: sysLogListLength,
        }}
      />
    </div>
  );
}
